const btn = document.querySelector('button')
const list = document.querySelector('.box')
const firstItem = document.querySelector('.item:first-child');
const lastItem = document.querySelector('.item:last-child');

// 拿指定元素的位置
function getLocation() {
    const rect = firstItem.getBoundingClientRect();
    return rect.top;
}

const start = getLocation();
console.log("元素的起始位置 --start---->", start)

// 按钮点击之后 改变位置
btn.onclick = () => {
    // 清空第一个位置 将第一个放在最后
    list.insertBefore(firstItem, null);

    // 结束位置是
    const end = getLocation(); // 此时渲染还没开始
    console.log('end: ', end);
    // delay(2000);

    // 偏移量 运动的距离
    const dis = start - end;
    firstItem.style.transform = `translateY(${dis}px)`
    console.log("始末位置的偏移量---- dis---->", dis)

    raf(() => {
        firstItem.style.transition = 'transform 0.8s'
        firstItem.style.removeProperty('transform');
        console.log('play');
    })
}

function raf(callback) {
    requestAnimationFrame(() => {
        requestAnimationFrame(callback);
    })
}

// 延时函数 类似 pyhton sleep
function delay(duration = 1000) {
    const start = Date.now();
    while (Date.now() - start < duration) { }
}